<template>
    <div class="aside">
        <el-menu background-color="transparent" class="el-menu-vertical-demo" :collapse="isCollapse" :router="true" :unique-opened="true">
            <h2 v-text="isCollapse?'后台':'后台管理系统'"></h2>
            <template v-for="item in menuData" :id="item.label">
                <el-submenu v-if="hasChildren(item)" :index="item.label" >
                    <template slot="title">
                        <i :class="`el-icon-${item.icon}`"></i>
                        <span slot="title">{{ item.label }}</span>
                    </template>
                    <el-menu-item v-for="itemSon in item.children" :id="itemSon.label"
                        :index="itemSon.label" :route="itemSon.path" @click="clickMenu(itemSon7)">
                        {{ itemSon.label }}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="item.label" :route="item.path" @click="clickMenu(item)">
                    <i :class="`el-icon-${item.icon}`"></i>
                    <span slot="title">{{ item.label }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menuData: [
                {
                    path: '/home',
                    name: 'home',
                    label: "首页",
                    icon: 's-home',
                    url: 'Home/Home'
                },
                {
                    path: '/mall',
                    name: 'mall',
                    label: "商品管理",
                    icon: 'video-play',
                    url: "MallManage/MallManage"
                },
                {
                    path: '/user',
                    name: 'user',
                    label: "用户管理",
                    icon: 'user',
                    url: 'Usermanage/Usermanage'
                },
                {
                    label: "其他",
                    icon: 'location',
                    children: [
                        {
                            path: '/pageOne',
                            name: 'page1',
                            label: "页面1",
                            icon: 'setting',
                            url: 'Other/PageOne'
                        },
                        {
                            path: '/pageTwo',
                            name: 'page2',
                            label: "页面2",
                            icon: 'setting',
                            url: 'Other/PageTwo'
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        isCollapse() {
            return this.$store.state.tab.isCollapse
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        hasChildren(item) {
            return item.children && item.children.length > 0
        },
        clickMenu(item) {
            console.log(item);
        }
    }
}
</script>

<style scoped>

.aside h2 {
    line-height: 60px;
    font-size: 18px;
    text-align: center;
}

.el-menu-vertical-demo[data-v-29a55538]:not(.el-menu--collapse) {
    width: 200px;
}
.el-menu {
    border-right: none;
}
</style>